<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-jQuery对象</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(() => {

            /**
             * 知识点：
             * 1. jQuery 对象是一个包含所有匹配的任意多个 dom 元素的伪数组对象
             * 2. 基本行为
             *      size() / length: 包含的 DOM 元素个数
             *      [index] / get(index): 得到对应位置的 DOM 元素
             *      each(): 遍历包含的所有 DOM 元素
             *      index(): 得到在所在兄弟元素中的下标
            */

            /**
             * 需求1. 统计一共有多少个按钮
            */
            const $btns = $('button')
            console.log($btns.size())
            console.log($btns.length)

            /**
             * 需求2. 取出第2个button的文本
            */
            // const btn2 = $('button').get(1)
            const btn2 = $('button')[1]
            console.log($(btn2).text())

            /**
             * 需求3. 输出所有button标签的文本
            */
            // $('button').each((index, element) => {
            //     console.log($(element).text())
            // })
            $('button').each(function () {
                console.log(this.textContent)
            })

            /**
             * 需求4. 输出'测试三'按钮是所有按钮中的第几个
            */
            console.log($('#btn3').index())

        })
    </script>
</head>

<body>
    <button>测试一</button>
    <button>测试二</button>
    <button id="btn3">测试三</button>
    <button>测试四</button>
</body>

</html>